<template>
    <div class="treeWrapper">
        <div class="title">中压注册数据</div>
        <div class="show">
            <el-checkbox-group v-model="checkList" @change="handleChangeCheck">
                <el-row>
                    <el-col :span="12"><el-checkbox label="1">显示线路名称</el-checkbox></el-col>
                    <el-col :span="12" class="right"><el-checkbox label="2">显示注销线段</el-checkbox></el-col>
                </el-row>
            </el-checkbox-group>
        </div>
        <div class="tree-bar">
            <el-tree
            :data="treeData"
            :props="defaultProps"
            :highlight-current="true"
            :default-expanded-keys="[this.label]"
            node-key="label"
            ref="treeBox"
            class="elTree"
            @node-click="handleNodeClick"
            lazy
            :load="loadNode"
            ></el-tree>
        </div>
    </div>
</template>
<script>
import { getZczyTree } from '@/api/sjwh/zczy.js';
export default {
    data() {
        return {
            checkList: ['1'],
            showAll: '',
            treeData: [], // 分类树data
            defaultProps: {
                label: "label",
                children: "child",
                isLeaf: "leaf",
            },
            label: '',
            curr_label: '',
            node_had: null,
            resolve_had: null,
            all_node_had: null,
            all_resolve_had: null,
            radio: '1', // 1：显示线路名称；2：显示注销线段
            dwbm: '' // 单位编码
        }
    },
    props: {
        propData: {
        type: Object,
            default: function() {
                return {};
            }
        }
    },
    watch: {
        propData: {
            deep: true,
            immediate: true,
            handler(newVal, oldVal) {
                if (newVal.isReload) {
                    this.reloadTree(newVal.update)
                }
            }
        }
    },
    methods: {
        /**树显示勾选项 */
        handleChangeCheck(val) {
            const that = this
            const option1 = '1'
            const option2 = '2'
            let showAllTyzt = false
            // if (val.indexOf(option1) > -1) {
            //     console.log('显示线路名称')
            // }
            if (val.indexOf(option2) > -1) {
                that.showAll = '1'
                showAllTyzt = true
            } else {
                that.showAll = ''
                showAllTyzt = false
            }
            that.all_node_had.childNodes = []
            that.loadNode(that.all_node_had, that.all_resolve_had)
            that.$emit("handleClickTreeNode", {level: 0, xdbm: '', showZxxd: true, showAllTyzt})
        },

        /**点击树节点 */
        handleNodeClick(data, node) {
            const that = this
            that.curr_label = data.label      
            that.$emit("handleClickTreeNode", data.data)
        },

        /**树的懒加载 */
        loadNode(node, resolve) {
            const that = this
            that.node_had = node
            that.resolve_had = resolve
            if (node.level == 0) {
                that.all_node_had = node
                that.all_resolve_had = resolve
                that.getTreeFirstLevel(resolve)
            } else {
                that.getTreeNextLevel(node, resolve)
            }           
        },

        /**获取一级【单位】节点数据 */
        async getTreeFirstLevel(resolve) {
            const that = this
            let treeNode = JSON.parse(sessionStorage.getItem('treeNode'))
            if (treeNode) {
                that.dwbm = treeNode.dwbm
                let reqData = {
                    dwbm: that.dwbm,
                    showAll: that.showAll,
                    level: ""
                }
                let res = await getZczyTree(reqData)
                if(res.code === 0){
                    that.label = res.data[0].label
                    return resolve(res.data)
                }else{
                    that.$message.error(res.message)
                }
            } else {
                that.$router.push('/404')
                return false
            }
        },

        /**获取二级【变电站/线路/线段】节点数据 */
        async getTreeNextLevel(node, resolve) {
            const that = this
            let reqData = {
                dwbm: that.dwbm,
                level: node.data.data.level,
                xdbmLike: node.data.data.xdbm,
                showAll: that.showAll
            }
            let res = await getZczyTree(reqData)
            if (res.code === 0) {
                return resolve(res.data)
            } else {
                that.$message.error(res.message)
            }
        },

        reloadTree(val) {
            const that = this
            if (val == 'updateSelf') {
                that.node_had.childNodes = []
                that.loadNode(that.node_had, that.resolve_had)
            } else if (val == 'updateParent') {
                let parentLabel = that.node_had.parent.data.label
                let node = that.$refs.treeBox.getNode(parentLabel)
                node.loaded = false
                node.expand()
            } else {
                that.all_node_had.childNodes = []
                that.loadNode(that.all_node_had, that.all_resolve_had)
            }
            that.$refs.treeBox.setCurrentKey(that.curr_label)
        }
    }
}
</script>
<style lang='scss' scoped>
label {
  font-weight: 400 !important;
}

.treeWrapper {
    height: 100%;
}
.treeWrapper .tree-bar {
    width: 100%;
    height: calc(100% - 50px);
    overflow: auto;
}
.elTree{
  width: 100%;
  height: 100%;
  overflow: auto;
}
/deep/ .el-tree > .el-tree-node {
  min-width: 100%;
  display: inline-block;
}
.show {
    margin-bottom: 5px;
    line-height: 20px;
}
.show .right {
    text-align: right;
}
.show /deep/ .el-checkbox__label {
    padding-left: 5px;
}
.title {
    font-size: 18px;
    height: 20px;
    line-height: 20px;
    margin-bottom: 8px;
}
</style>
